import React, { useRef, useState } from 'react';
import {
  Avatar,
  Card,
  Col,
  Divider,
  FormInstance,
  Image,
  List,
  message,
  Popover,
  Row,
  Tabs,
  Modal,
  notification,
} from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import styles from './style.less';
import { useRequest } from '@@/plugin-request/request';
import {
  accountOpen,
  accountOpenSave,
  accountOpenPay,
  accountOpenPayStatus,
} from '@/pages/Account/Open/service';
import { ModuleData, ModuleItem } from './data.d';
import ProForm, {
  ProFormDependency,
  ProFormDigit,
  ProFormRadio,
  ProFormSelect,
  ProFormText,
  ProFormUploadButton,
} from '@ant-design/pro-form';
import { TagFilled } from '@ant-design/icons';
import { UploadFile } from 'antd/lib/upload/interface';
import { RiskNoticeBody } from '@/pages/Defense/Database/RiskNotice/data';
import modal from 'antd/lib/modal';
import Paragraph from 'antd/lib/typography/Paragraph';

const Approve: React.FC<Record<string, any>> = () => {
  const { loading } = useRequest<{ data: ModuleData }>(async () => {
    const result = await accountOpen();
    let data = result.data;
    setOpenModule(data.openModule);
    setNotOpenModule(data.notOpenModule);
    if (data.notOpenModule.length === 0) {
      setOpenType(1);
    }
    return result;
  });
  const [notOpenModule, setNotOpenModule] = useState<ModuleItem[]>([]);
  const [openModule, setOpenModule] = useState<ModuleItem[]>([]);
  const [openType, setOpenType] = useState<number>(0);
  const [totalPrice, setTotalPrice] = useState<number>(0);
  const [payType, setPayType] = useState<string>('2');
  const [showPayCode, setShowPayCode] = useState<boolean>(false);
  const [showPayCodeData, setShowPayCodeData] = useState<boolean>();
  const formRef = useRef<FormInstance>();

  const getPrice = (ids: number[], type: number, num: number) => {
    if (!ids) {
      ids = [];
    }
    let price = 0;
    if (type == 0) {
      for (let i = 0; i < notOpenModule.length; i++) {
        let moduleItem = notOpenModule[i];
        if (ids.indexOf(moduleItem.moduleId) >= 0) {
          price = price + parseFloat(moduleItem.price);
        }
      }
    } else if (type == 1) {
      // debugger;
      for (let i = 0; i < openModule.length; i++) {
        let moduleItem = openModule[i];
        console.log(moduleItem);
        if (ids.indexOf(moduleItem.moduleId) >= 0) {
          price = price + parseFloat(moduleItem.price);
        }
      }
      // for (let moduleItem in openModule) {
      //   if (ids.indexOf(moduleItem.moduleId) >= 0) {
      //     price = price + moduleItem.price;
      //   }
      // }
    }
    console.log(price);
    setTotalPrice(price * num);
  };
  const [previewData, setPreviewData] = useState({
    visible: false,
    image: '',
    title: '',
  });
  const uploadProps = {
    headers: {
      Authorization: `Bearer ${localStorage.getItem('token')}`,
    },
    multiple: false,
    // @ts-ignore
    onChange({ file }) {
      if (file.status === 'done' && file.response.code !== 200) {
        file.status = 'error';
      }
    },
    onPreview: async (file: UploadFile) => {
      setPreviewData({
        image: file?.response?.data?.url || file.url,
        visible: true,
        title: '查看图片',
      });
    },
    name: 'file',
    listType: 'picture-card',
    max: 1,
  };
  const submitCheckFile = (
    values: RiskNoticeBody,
    fileName: string,
    dataName: string,
    msg: string,
  ) => {
    if (!values.hasOwnProperty(fileName)) {
      throw new Error('请上传凭证');
    }
    let file = values[fileName][0];
    if (file.status !== 'done' || (file?.response && file?.response?.code !== 200)) {
      throw new Error(msg);
    }
    values[dataName] = file?.response?.data?.url || file.url;
    // throw new Error('请上传凭证2222222222');
  };

  let interval: number | undefined;
  const loadScanData = async (k) => {
    if (interval) {
      clearInterval(interval);
    }
    interval = window.setInterval(async () => {
      //加载
      let data = await accountOpenPayStatus(k);
      // let data = await scanResult("bfc18c83127549eb8020ec0b4436330b");
      console.log(data, 'loadScanData');
      if (data.code === 200 && data.data) {
        clearInterval(interval);
        // alert('支付成功');
        notification.success({
          message: '支付通知',
          description: '恭喜您，支付成功！',
          onClick: () => {
            console.log('Notification Clicked!');
          },
        });
        setShowPayCode(false);
        setTimeout(() => {
          location.reload();
        }, 2000);
      } else {
        console.log(data.msg);
      }
    }, 1000);
  };
  return (
    <PageContainer content="" waterMarkProps={{ content: '', fontColor: '#ff000040' }}>
      {loading ? (
        <></>
      ) : (
        <>
          {/*<List*/}
          {/*  header={<div>已开通模块</div>}*/}
          {/*  grid={{ gutter: 16, column: 4 }}*/}
          {/*  dataSource={openModule}*/}
          {/*  renderItem={(item) => (*/}
          {/*    <List.Item>*/}
          {/*      <List.Item.Meta*/}
          {/*        avatar={*/}
          {/*          <Avatar*/}
          {/*            style={{backgroundColor: '#87d068'}}*/}
          {/*            icon={<TagFilled/>}*/}
          {/*          />*/}
          {/*        }*/}
          {/*        title={item.moduleName}*/}
          {/*        description={*/}
          {/*          <span>*/}
          {/*                                      {item.price}/年{' '}*/}
          {/*            <span*/}
          {/*              style={{marginLeft: '5px', color: 'orange'}}*/}
          {/*            >*/}
          {/*                                        于{item.endTime}到期*/}
          {/*                                      </span>*/}
          {/*                                    </span>*/}
          {/*        }*/}
          {/*      />*/}
          {/*    </List.Item>*/}
          {/*  )}*/}
          {/*/>*/}
          <Card bordered={false}>
            <Row>
              <Col>
                <Tabs
                  defaultActiveKey="2"
                  onChange={(key: string) => {
                    setPayType(key);
                    formRef.current?.setFieldsValue({
                      payType: key,
                    });
                  }}
                >
                  <Tabs.TabPane tab="微信" key="2">
                    <ProForm
                      style={{ margin: 'auto', marginTop: 8, maxWidth: 600 }}
                      name="basic"
                      layout="vertical"
                      formRef={formRef}
                      onValuesChange={(changeValues, values) => {
                        if (changeValues.hasOwnProperty('flag')) {
                          formRef.current?.setFieldsValue({ moduleIds: [] });
                        }
                        if (
                          changeValues.hasOwnProperty('moduleIds') ||
                          changeValues.hasOwnProperty('openNum')
                        ) {
                          getPrice(values['moduleIds'], values['flag'], values['openNum']);
                        }
                        if (changeValues.hasOwnProperty('openNum')) {
                          getPrice(values['moduleIds'], values['flag'], values['openNum']);
                        }
                        console.log(values);
                      }}
                      onFinish={async (value) => {
                        const success = await accountOpenPay(value);
                        if (success) {
                          console.log(success, '000000000');
                          formRef.current?.resetFields();
                          setTotalPrice(0);

                          setShowPayCode(true);
                          setShowPayCodeData(success.data);
                          loadScanData(success.msg);
                        }
                      }}
                    >
                      {/*<ProFormText hidden name='openNum'/>*/}
                      <ProFormText hidden name="payType" initialValue={'2'} />
                      <ProFormText hidden name="openUnit" initialValue={2} />
                      <ProFormText hidden name="openVoucher" />
                      <ProFormRadio.Group
                        options={
                          openType == 0
                            ? [
                                {
                                  value: 0,
                                  label: '开通',
                                },
                                {
                                  value: 1,
                                  label: '续费',
                                },
                              ]
                            : [
                                {
                                  value: 1,
                                  label: '续费',
                                },
                              ]
                        }
                        initialValue={openType}
                        name="flag"
                      />

                      <ProFormDependency name={['flag']}>
                        {({ flag }) => {
                          if (flag == 0) {
                            return (
                              <>
                                <ProFormSelect
                                  // width="md"
                                  placeholder={'请选择开通模块'}
                                  label={'开通模块'}
                                  addonAfter={
                                    <Popover
                                      content={
                                        <div style={{ width: 300 }}>
                                          <List
                                            itemLayout="horizontal"
                                            dataSource={notOpenModule}
                                            renderItem={(item) => (
                                              <List.Item>
                                                <List.Item.Meta
                                                  avatar={
                                                    <Avatar
                                                      style={{ backgroundColor: '#87d068' }}
                                                      icon={<TagFilled />}
                                                    />
                                                  }
                                                  title={item.moduleName}
                                                  description={item.price + '/年 '}
                                                />
                                              </List.Item>
                                            )}
                                          />
                                        </div>
                                      }
                                    >
                                      <a>价格</a>
                                    </Popover>
                                  }
                                  rules={[
                                    {
                                      required: true,
                                      message: '请选择开通模块',
                                    },
                                  ]}
                                  name="moduleIds"
                                  fieldProps={{
                                    mode: 'multiple',
                                    fieldNames: {
                                      value: 'moduleId',
                                      label: 'moduleName',
                                    },
                                  }}
                                  // @ts-ignore
                                  options={notOpenModule}
                                  // extra={<Collapse defaultActiveKey={"1"} bordered={false} style={{marginTop: '5px'}}>
                                  //   <Panel header="价格说明" key="1">
                                  //     <List
                                  //       itemLayout="horizontal"
                                  //       dataSource={notOpenModule}
                                  //       renderItem={item => (
                                  //         <List.Item>
                                  //           <List.Item.Meta
                                  //             avatar={<Avatar style={{backgroundColor: '#87d068'}} icon={<TagFilled/>}/>}
                                  //             title={item.moduleName}
                                  //             description={item.price + "/年"}
                                  //           />
                                  //         </List.Item>
                                  //       )}/>
                                  //   </Panel>
                                  // </Collapse>}
                                />

                                <ProFormDigit
                                  label="开通时长"
                                  name="openNum"
                                  min={1}
                                  addonAfter={<>年</>}
                                  max={100}
                                  // width="xs"
                                  rules={[
                                    {
                                      required: true,
                                    },
                                  ]}
                                  initialValue={1}
                                />
                              </>
                            );
                          } else if (flag == 1) {
                            return (
                              <>
                                <ProForm.Group>
                                  <ProFormSelect
                                    width="md"
                                    label={'续费模块'}
                                    placeholder={'请选择续费模块'}
                                    addonAfter={
                                      <Popover
                                        content={
                                          <div style={{ width: 300 }}>
                                            <List
                                              itemLayout="horizontal"
                                              dataSource={openModule}
                                              renderItem={(item) => (
                                                <List.Item>
                                                  <List.Item.Meta
                                                    avatar={
                                                      <Avatar
                                                        style={{ backgroundColor: '#87d068' }}
                                                        icon={<TagFilled />}
                                                      />
                                                    }
                                                    title={item.moduleName}
                                                    description={
                                                      <span>
                                                        {item.price}/年{' '}
                                                        <span
                                                          style={{
                                                            marginLeft: '5px',
                                                            color: 'orange',
                                                          }}
                                                        >
                                                          于{item.endTime}到期
                                                        </span>
                                                      </span>
                                                    }
                                                  />
                                                </List.Item>
                                              )}
                                            />
                                          </div>
                                        }
                                      >
                                        <a>价格</a>
                                      </Popover>
                                    }
                                    rules={[
                                      {
                                        required: true,
                                        message: '请选择续费模块',
                                      },
                                    ]}
                                    name="moduleIds"
                                    fieldProps={{
                                      mode: 'multiple',
                                      fieldNames: {
                                        value: 'moduleId',
                                        label: 'moduleName',
                                      },
                                    }}
                                    // extra={<Collapse defaultActiveKey={"1"} bordered={false} style={{marginTop: '5px'}}>
                                    //   <Panel header="价格说明" key="1">
                                    //     <List
                                    //       itemLayout="horizontal"
                                    //       dataSource={openModule}
                                    //       renderItem={item => (
                                    //         <List.Item>
                                    //           <List.Item.Meta
                                    //             avatar={<Avatar style={{backgroundColor: '#87d068'}} icon={<TagFilled/>}/>}
                                    //             title={item.moduleName}
                                    //             description={item.price + "/年"}
                                    //           />
                                    //         </List.Item>
                                    //       )}/>
                                    //   </Panel>
                                    // </Collapse>}
                                    // @ts-ignore
                                    options={openModule}
                                  />
                                </ProForm.Group>
                                <ProForm.Group>
                                  <ProFormDigit
                                    label="续费时长"
                                    name="openNum"
                                    rules={[
                                      {
                                        required: true,
                                      },
                                    ]}
                                    initialValue={1}
                                    min={1}
                                    addonAfter={<>年</>}
                                    max={100}
                                    width="xs"
                                  />
                                </ProForm.Group>
                              </>
                            );
                          }
                          return <></>;
                        }}
                      </ProFormDependency>

                      <div style={{ marginBottom: '10px' }}>
                        总价格:
                        <span
                          style={{
                            fontSize: '20px',
                            fontWeight: 'bold',
                            color: 'orange',
                            marginLeft: '5px',
                            marginRight: '5px',
                          }}
                        >
                          {totalPrice.toFixed(2)}
                        </span>
                        元
                      </div>
                    </ProForm>

                    <Modal
                      visible={showPayCode}
                      onCancel={() => {
                        setShowPayCode(false);
                      }}
                      destroyOnClose={true}
                      maskClosable={false}
                      title={'扫码支付'}
                      footer={null}
                    >
                      <div
                        style={{ paddingTop: '30px', paddingBottom: '30px', textAlign: 'center' }}
                      >
                        <img src={showPayCodeData} style={{ width: '300px', height: '300px' }} />
                      </div>
                      <div
                        style={{
                          textAlign: 'center',
                          marginBottom: '30px',
                          fontSize: '20px',
                          color: 'green',
                        }}
                      >
                        请使用微信扫码支付
                      </div>
                    </Modal>
                  </Tabs.TabPane>
                  <Tabs.TabPane tab="支付宝" key="1">
                    <Image
                      width={300}
                      src="https://cdn.51zasafe.com/zun/enterprise/pay-voucher/2f80bb59a4d544c8bd76652169032d14.png"
                    />
                  </Tabs.TabPane>

                  <Tabs.TabPane tab="对公账户" key="3">
                    <p>请汇款至以下账户：</p>
                    <Paragraph copyable={{ text: '河南智安信息科技有限公司' }}>
                      开户名称：河南智安信息科技有限公司
                    </Paragraph>
                    <Paragraph
                      copyable={{ text: '中国农业银行股份有限公司郑州京广北路分理处二七区支行' }}
                    >
                      开户银行：中国农业银行股份有限公司郑州京广北路分理处二七区支行
                    </Paragraph>
                    <Paragraph copyable={{ text: '16042301040006035' }}>
                      账号：16042301040006035
                    </Paragraph>
                    <Paragraph copyable={{ text: '91410103341689774D' }}>
                      纳税人识别号：91410103341689774D
                    </Paragraph>
                  </Tabs.TabPane>
                </Tabs>
              </Col>
              <Col span={18}>
                {payType != '2' ? (
                  <ProForm
                    // requiredMark={}
                    style={{ margin: 'auto', marginTop: 8, maxWidth: 600 }}
                    name="basic"
                    layout="vertical"
                    formRef={formRef}
                    // params={{ public: '1', payType: payType }}
                    onValuesChange={(changeValues, values) => {
                      if (changeValues.hasOwnProperty('flag')) {
                        formRef.current?.setFieldsValue({ moduleIds: [] });
                      }
                      if (
                        changeValues.hasOwnProperty('moduleIds') ||
                        changeValues.hasOwnProperty('openNum')
                      ) {
                        getPrice(values['moduleIds'], values['flag'], values['openNum']);
                      }
                      if (changeValues.hasOwnProperty('openNum')) {
                        getPrice(values['moduleIds'], values['flag'], values['openNum']);
                      }
                      console.log(values);
                    }}
                    onFinish={async (value) => {
                      console.log(value);
                      if (value.payType == '2') {
                        const success = await accountOpenPay(value);
                      } else {
                        try {
                          submitCheckFile(value, 'openVoucherFile', 'openVoucher', '图片未上传');
                        } catch ({ message: msg }) {
                          // @ts-ignore
                          message.error(msg);
                          return;
                        }
                        delete value['openVoucherFile'];
                        const success = await accountOpenSave(value);
                      }
                      console.log(value);
                      if (success) {
                        formRef.current?.resetFields();
                        setTotalPrice(0);
                        modal.success({
                          content: '提交成功',
                          okText: '确定',
                        });
                      }
                    }}
                  >
                    {/*<ProFormText hidden name='openNum'/>*/}
                    <ProFormText hidden name="payType" initialValue={'2'} />
                    <ProFormText hidden name="openUnit" initialValue={2} />
                    <ProFormText hidden name="openVoucher" />
                    <ProFormRadio.Group
                      options={
                        openType == 0
                          ? [
                              {
                                value: 0,
                                label: '开通',
                              },
                              {
                                value: 1,
                                label: '续费',
                              },
                            ]
                          : [
                              // {
                              //   value: 0,
                              //   label: '开通',
                              // },
                              {
                                value: 1,
                                label: '续费',
                              },
                            ]
                      }
                      // label="方式"
                      initialValue={openType}
                      // help="客户、邀评人默认被分享"
                      name="flag"
                    />

                    <ProFormDependency name={['flag']}>
                      {({ flag }) => {
                        if (flag == 0) {
                          return (
                            <>
                              <ProFormSelect
                                // width="md"
                                placeholder={'请选择开通模块'}
                                label={'开通模块'}
                                addonAfter={
                                  <Popover
                                    content={
                                      <div style={{ width: 300 }}>
                                        <List
                                          itemLayout="horizontal"
                                          dataSource={notOpenModule}
                                          renderItem={(item) => (
                                            <List.Item>
                                              <List.Item.Meta
                                                avatar={
                                                  <Avatar
                                                    style={{ backgroundColor: '#87d068' }}
                                                    icon={<TagFilled />}
                                                  />
                                                }
                                                title={item.moduleName}
                                                description={item.price + '/年 '}
                                              />
                                            </List.Item>
                                          )}
                                        />
                                      </div>
                                    }
                                  >
                                    <a>价格</a>
                                  </Popover>
                                }
                                rules={[
                                  {
                                    required: true,
                                    message: '请选择开通模块',
                                  },
                                ]}
                                name="moduleIds"
                                fieldProps={{
                                  mode: 'multiple',
                                  fieldNames: {
                                    value: 'moduleId',
                                    label: 'moduleName',
                                  },
                                }}
                                // @ts-ignore
                                options={notOpenModule}
                                // extra={<Collapse defaultActiveKey={"1"} bordered={false} style={{marginTop: '5px'}}>
                                //   <Panel header="价格说明" key="1">
                                //     <List
                                //       itemLayout="horizontal"
                                //       dataSource={notOpenModule}
                                //       renderItem={item => (
                                //         <List.Item>
                                //           <List.Item.Meta
                                //             avatar={<Avatar style={{backgroundColor: '#87d068'}} icon={<TagFilled/>}/>}
                                //             title={item.moduleName}
                                //             description={item.price + "/年"}
                                //           />
                                //         </List.Item>
                                //       )}/>
                                //   </Panel>
                                // </Collapse>}
                              />

                              <ProFormDigit
                                label="开通时长"
                                name="openNum"
                                min={1}
                                addonAfter={<>年</>}
                                max={100}
                                // width="xs"
                                rules={[
                                  {
                                    required: true,
                                  },
                                ]}
                                initialValue={1}
                              />
                            </>
                          );
                        } else if (flag == 1) {
                          return (
                            <>
                              <ProForm.Group>
                                <ProFormSelect
                                  width="md"
                                  label={'续费模块'}
                                  placeholder={'请选择续费模块'}
                                  addonAfter={
                                    <Popover
                                      content={
                                        <div style={{ width: 300 }}>
                                          <List
                                            itemLayout="horizontal"
                                            dataSource={openModule}
                                            renderItem={(item) => (
                                              <List.Item>
                                                <List.Item.Meta
                                                  avatar={
                                                    <Avatar
                                                      style={{ backgroundColor: '#87d068' }}
                                                      icon={<TagFilled />}
                                                    />
                                                  }
                                                  title={item.moduleName}
                                                  description={
                                                    <span>
                                                      {item.price}/年{' '}
                                                      <span
                                                        style={{
                                                          marginLeft: '5px',
                                                          color: 'orange',
                                                        }}
                                                      >
                                                        于{item.endTime}到期
                                                      </span>
                                                    </span>
                                                  }
                                                />
                                              </List.Item>
                                            )}
                                          />
                                        </div>
                                      }
                                    >
                                      <a>价格</a>
                                    </Popover>
                                  }
                                  rules={[
                                    {
                                      required: true,
                                      message: '请选择续费模块',
                                    },
                                  ]}
                                  name="moduleIds"
                                  fieldProps={{
                                    mode: 'multiple',
                                    fieldNames: {
                                      value: 'moduleId',
                                      label: 'moduleName',
                                    },
                                  }}
                                  // extra={<Collapse defaultActiveKey={"1"} bordered={false} style={{marginTop: '5px'}}>
                                  //   <Panel header="价格说明" key="1">
                                  //     <List
                                  //       itemLayout="horizontal"
                                  //       dataSource={openModule}
                                  //       renderItem={item => (
                                  //         <List.Item>
                                  //           <List.Item.Meta
                                  //             avatar={<Avatar style={{backgroundColor: '#87d068'}} icon={<TagFilled/>}/>}
                                  //             title={item.moduleName}
                                  //             description={item.price + "/年"}
                                  //           />
                                  //         </List.Item>
                                  //       )}/>
                                  //   </Panel>
                                  // </Collapse>}
                                  // @ts-ignore
                                  options={openModule}
                                />
                              </ProForm.Group>
                              <ProForm.Group>
                                <ProFormDigit
                                  label="续费时长"
                                  name="openNum"
                                  rules={[
                                    {
                                      required: true,
                                    },
                                  ]}
                                  initialValue={1}
                                  min={1}
                                  addonAfter={<>年</>}
                                  max={100}
                                  width="xs"
                                />
                              </ProForm.Group>
                            </>
                          );
                        }
                        return <></>;
                      }}
                    </ProFormDependency>

                    {/*<ProFormTextArea*/}
                    {/*  label="备注"*/}
                    {/*  width="xl"*/}
                    {/*  name="goal"*/}
                    {/*  rules={[*/}
                    {/*    {*/}
                    {/*      required: true,*/}
                    {/*      message: '请输入目标描述',*/}
                    {/*    },*/}
                    {/*  ]}*/}
                    {/*  placeholder="请输入你的阶段性工作目标"*/}
                    {/*/>*/}

                    <div style={{ marginBottom: '10px' }}>
                      总价格:
                      <span
                        style={{
                          fontSize: '20px',
                          fontWeight: 'bold',
                          color: 'orange',
                          marginLeft: '5px',
                          marginRight: '5px',
                        }}
                      >
                        {totalPrice.toFixed(2)}
                      </span>
                      元
                    </div>

                    <ProFormUploadButton
                      name="openVoucherFile"
                      label="支付凭证"
                      max={1}
                      // @ts-ignore
                      fieldProps={{ ...uploadProps }}
                      action="/v2/enterprise/upload/pay-voucher"
                      extra={
                        <div style={{ color: 'orange' }}>
                          请根据左侧支付方式,支付完成后,上传支付凭证提交
                        </div>
                      }
                    />
                  </ProForm>
                ) : (
                  <></>
                )}
              </Col>
            </Row>

            <Divider style={{ margin: '40px 0 24px' }} />
            <div className={styles.desc}>
              <h3 style={{color:'red'}}>更多优惠请联系客服</h3>
              <h3>支付完成后，如有疑问，请通过下方联系方式联系我们</h3>
              <p>
                联系人：牛老师、陆老师
                <br />
                联系电话（微信同号）：19937125757
                <br />
                客户联系电话：0371-55901300
                <br />
                工作时间：周一至周五 9：00-18:00
                <br />
                注：为了能够准确及时确认你的支付信息,请您在支付费用(电汇、银行汇款、网银支付)时,在备注中注明您的企业名称.我司收到您的汇款后,3个工作日内开通正式账户,谢谢您的合作!
              </p>
            </div>
          </Card>
        </>
      )}

      <Image
        width={200}
        style={{ display: 'none' }}
        src={previewData.image}
        preview={{
          visible: previewData.visible,
          src: previewData.image,
          onVisibleChange: (value) => {
            setPreviewData({ image: previewData.image, title: '', visible: value });
          },
        }}
      />
    </PageContainer>
  );
};

export default Approve;
